/******************************************************************************
* File description: runningchartcurve.qml
* Function: 实验运行：曲线图
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-26
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.15
import QtCharts 2.15

Item {
    id: root

    /* property 定义开始 */

    /* property 定义结束 */

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 头
        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 42

            // 图例
            RowLayout {
                anchors.fill: parent
                spacing: 17

                CustomHorSpacerItem {}

                // FAM
                CustomCheckBox {
                    id: famCheck
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignLeft
                    checkBoxText: "FAM"
                    checkWidth: 20
                    checkHeight: 20
                    checkRadius: 2
                    checkedFillColor: "#FFFF2B37"
                    checkBoxFontColor: "#FFFF2B37"
                    checkBorderColor: "#FFF"
                    checkedBorderColor: "transparent"
                    isChecked: true
                }

                // VIC
                CustomCheckBox {
                    id: vicCheck
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignLeft
                    checkBoxText: "VIC"
                    checkWidth: 20
                    checkHeight: 20
                    checkRadius: 2
                    checkedFillColor: "#FF422FCD"
                    checkBoxFontColor: "#FF422FCD"
                    checkBorderColor: "#FFF"
                    checkedBorderColor: "transparent"
                    isChecked: true
                }

                // ROX
                CustomCheckBox {
                    id: roxCheck
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignLeft
                    checkBoxText: "ROX"
                    checkWidth: 20
                    checkHeight: 20
                    checkRadius: 2
                    checkedFillColor: "#FF00C441"
                    checkBoxFontColor: "#FF00C441"
                    checkBorderColor: "#FFF"
                    checkedBorderColor: "transparent"
                    isChecked: true
                }

                // CY5
                CustomCheckBox {
                    id: cy5Check
                    Layout.alignment: Qt.AlignHCenter | Qt.AlignLeft
                    checkBoxText: "CY5"
                    checkWidth: 20
                    checkHeight: 20
                    checkRadius: 2
                    checkedFillColor: "#FFFF873E"
                    checkBoxFontColor: "#FFFF873E"
                    checkBorderColor: "#FFF"
                    checkedBorderColor: "transparent"
                    isChecked: true
                }

                CustomHorSpacerItem {}
            }

            // 筛选
            Item {
                id: filterContainer
                width: filterRowLayout.width
                height: parent.height
                anchors.right: parent.right

                RowLayout {
                    id: filterRowLayout
                    width: filterComboBox.width + filterButton.width + spacing
                    height: parent.height
                    spacing: 1

                    // 筛选组合框
                    CustomComboBox {
                        id: filterComboBox
                        Layout.preferredWidth: 100
                        Layout.preferredHeight: 40
                        comboRadius: 4
                        comboBorderColor: "#FFF"
                        comboFontColor: "#FFF"
                        comboDefaultText: "默认"
                        comboBgColor: "transparent"

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                filterPopup.opened ? filterPopup.close(): filterPopup.open()
                            }
                        }


                        // 筛选下拉菜单
                        Popup {
                            id: filterPopup
                            modal: false
                            width: filterComboBox.width + filterComboBox.comboLeftPadding +
                                   filterComboBox.indicatorPadding
                            topPadding: 2
                            background: Rectangle {
                                color: "transparent"
                            }
                            closePolicy: Popup.CloseOnPressOutsideParent
                            x: -filterComboBox.comboLeftPadding
                            y: filterComboBox.height
                            clip: true

                            // 阴影
                            Rectangle {
                                anchors.fill: parent
                                color: "transparent"
                                layer.enabled: true  // 设置layer为enable
                                layer.effect: DropShadow {
                                    radius: 20
                                    samples: 41
                                    transparentBorder: true
                                    color: "#4D002062"
                                }
                            }

                            // 打开时动画
                            enter: Transition {
                                NumberAnimation {
                                    property: "height"
                                    from: 0
                                    to: 200
                                    duration: 200
                                    easing.type: Easing.InOutQuad
                                }
                            }
                            // 关闭时动画
                            exit: Transition {
                                NumberAnimation {
                                    property: "height"
                                    from: 200
                                    to: 0
                                    duration: 200
                                    easing.type: Easing.InOutQuad
                                }
                            }

                            // 筛选
                            Rectangle {
                                id: filterCheckBoxCon
                                anchors.fill: parent
                                color: "#FFFFFFFF"
                                radius: 4

                                ColumnLayout {
                                    anchors {
                                        fill: parent
                                        topMargin: 10
                                        leftMargin: 12
                                    }
                                    spacing: 13

                                    // 全部
                                    CustomCheckBox {
                                        Layout.fillWidth: true
                                        Layout.preferredHeight: 21
                                        checkBoxText: "全部"
                                        checkBoxFontColor: "#FF222222"
                                        checkBorderColor: "#FF2F42CD"
                                        checkedBorderColor: "#FF2F42CD"
                                        checkedFillColor: "#FF2F42CD"
                                    }

                                    // A1
                                    CustomCheckBox {
                                        Layout.fillWidth: true
                                        Layout.preferredHeight: 21
                                        checkBoxText: "A1"
                                        checkBoxFontColor: "#FF222222"
                                        checkBorderColor: "#FF2F42CD"
                                        checkedBorderColor: "#FF2F42CD"
                                        checkedFillColor: "#FF2F42CD"
                                    }

                                    // A2
                                    CustomCheckBox {
                                        Layout.fillWidth: true
                                        Layout.preferredHeight: 21
                                        checkBoxText: "A2"
                                        checkBoxFontColor: "#FF222222"
                                        checkBorderColor: "#FF2F42CD"
                                        checkedBorderColor: "#FF2F42CD"
                                        checkedFillColor: "#FF2F42CD"
                                    }

                                    // A3
                                    CustomCheckBox {
                                        Layout.fillWidth: true
                                        Layout.preferredHeight: 21
                                        checkBoxText: "A3"
                                        checkBoxFontColor: "#FF222222"
                                        checkBorderColor: "#FF2F42CD"
                                        checkedBorderColor: "#FF2F42CD"
                                        checkedFillColor: "#FF2F42CD"
                                    }

                                    // A4
                                    CustomCheckBox {
                                        Layout.fillWidth: true
                                        Layout.preferredHeight: 21
                                        checkBoxText: "A4"
                                        checkBoxFontColor: "#FF222222"
                                        checkBorderColor: "#FF2F42CD"
                                        checkedBorderColor: "#FF2F42CD"
                                        checkedFillColor: "#FF2F42CD"
                                    }

                                    CustomVerSpacerItem {}
                                }
                            }
                        }
                    }

                    // 筛选按钮
                    PureButton {
                        id: filterButton
                        Layout.preferredWidth: 100
                        Layout.preferredHeight: 40
                        pureBtnWidth: 100
                        pureBtnHeight: 40
                        pureBtnColor: "#FFFFFFFF"
                        pureHoveredColor: "#FFFFFFFF"
                        pureBtnRadius: 4
                        pureFontPixelSize: 16
                        pureLabelColor: "#FF222222"
                        pureText: "筛选"
                        pureBtnBorderWidth: 0
                    }
                }
            }
        }

        // 报表
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.topMargin: 17
            color: "#C3FFFFFF"
            radius: 13

            ChartView {
                id: curveChart
                anchors.fill: parent
                antialiasing: true
                legend.visible: false
                margins.left: 0
                margins.bottom: 0
                backgroundColor: "transparent"
                backgroundRoundness: 0

                ValueAxis {
                    id: axisX
                    titleText: qsTr("循环数(Cycles)")
                    titleFont.family: "Alibaba PuHuiTi"
                    titleFont.pixelSize: 15
                    labelsFont.family: "Alibaba PuHuiTi"
                    labelsFont.pixelSize: 15
                    labelsColor: "#9A222222"
                    gridLineColor: "#00999999"
                    min: 0
                    max: 96
                    tickCount: 5
                    labelFormat: "%d"
                }

                ValueAxis {
                    id: axisY
                    titleText: qsTr("荧光强度")
                    titleFont.family: "Alibaba PuHuiTi"
                    titleFont.pixelSize: 15
                    labelsFont.family: "Alibaba PuHuiTi"
                    labelsFont.pixelSize: 15
                    labelsColor: "#9A222222"
                    gridLineColor: "#999"
                    min: 0
                    max: 20000
                    tickCount: 5
                    labelFormat: "%d"
                }

                SplineSeries {
                    id: instantpline;
                    name: "SplineSeries"
                    axisX: axisX
                    axisY: axisY
                    color: "red"

                    XYPoint { x: 0; y: 0.0 }
                    XYPoint { x: 1; y: 5000 }
                    XYPoint { x: 2; y: 3000 }
                    XYPoint { x: 3; y: 1000 }
                    XYPoint { x: 4; y: 8000 }
                    XYPoint { x: 5; y: 4500 }
                    XYPoint { x: 6; y: 3250 }
                }
            }
        }
    }
}
